<template>
  <div class="table-view">
    <Card :bordered="false" dis-hover :padding="padding0">
      <div class="table-card" slot="title" ref="cardHeaderHeight">
        <slot name="search"></slot>
      </div>

      <div style="padding-left:12px;padding-right:12px">
        <Table
          ref="table"
          :border="border"
          :class="tableClass"
          :columns="tableColumns"
          :data="tableData"
          @on-row-click="onRowClick"
          @on-row-dblclick="onRowDblclick"
          @on-select-all-cancel="handleCancelSelectAll"
          @on-select-all="handleSelectAll"
          @on-select="handleSelect"
          @on-select-cancel="handleCancel"
          :max-height="maxHeight"
          :loading="tableLoading"
        ></Table>
        <div class="pagination" ref="pagination">
          <Page
            :total="pageInfo.total"
            :show-total="pagination.showTotal"
            :current="pageInfo.pageNumber"
            :page-size="pageInfo.pageSize"
            :page-size-opts="pagination.pageSizeOpts"
            :placement="pagination.placement"
            :show-elevator="pagination.showElevator"
            :show-sizer="pagination.showSizer"
            @on-change="pageNumberChange"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxHeight: this.height, // table高度
      padding0: 0,
      tableLoading1: false,
      tableLoading2: false
    };
  },
  props: {
    tableColumns: {
      type: Array
    },
    tableData: {
      type: Array
    },
    tableClass: {
      type: String,
      default: ""
    },
    height: {
      type: Number,
      default: 0
    },
    pageInfo: {
      type: Object
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          size: "default",
          simple: false,
          pageSize: 10,
          pageSizeOpts: [10, 20, 30, 40],
          placement: "top",
          showTotal: true,
          showSizer: true,
          showElevator: true
        };
      }
    },
    offsetHeight: {
      type: Number,
      default: 0
    },
    border: {
      type: Boolean,
      default: false
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    bodySize() {
      return this.$store.state.app.bodySize;
    }
  },
  watch: {
    bodySize(newVal, oldVal) {
      this.computeTableHeight(this.height);
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      setTimeout(res => {
        this.computeTableHeight(this.height);
      }, 500);
    });
  },
  activated() {
    this.$nextTick(() => {
      this.computeTableHeight(this.height);
    });
  },
  methods: {
    // 计算table高度
    computeTableHeight(height) {
      let self = this;
      try {
        let singlePageHeight = document.querySelector(".content-wrapper")
          ? document.querySelector(".content-wrapper").clientHeight
          : document.querySelector(".page").clientHeight;

      



        let pageHeaderHeight = document.querySelector(".page-header")
          ? document.querySelector(".page-header").clientHeight
          : 0;
        let pageHeaderMarBottom = document.querySelector(".page-header") ?  parseFloat(
          window.getComputedStyle( document.querySelector(".page-header"), null).marginBottom
        ):0;
        


        // ivu-card-head的高度 + 1px的border
        let searchHeight = this.$refs.cardHeaderHeight.parentNode.clientHeight;
        let searchHeightPaddTop = parseFloat(
          window.getComputedStyle(searchHeight, null).paddingTop
        );


        // 分页条的高度
        let pagination = this.$refs.pagination;
        let paginationHeight = pagination.clientHeight;
        let paginationMarginTop = parseFloat(
          window.getComputedStyle(pagination, null).marginTop
        );
        // ivu-card-body的上下padding
        // let ivuCardBody = document.querySelector('.table-view .ivu-card-body');
        let ivuCardBody = pagination.parentNode;
        let ivuCardBodyPaddingTop = parseFloat(
          window.getComputedStyle(ivuCardBody, null).paddingTop
        );
        let ivuCardBodyPaddingBottom = parseFloat(
          window.getComputedStyle(ivuCardBody, null).paddingBottom
        );
        // singlePage的上下margin
        let singlePage = document.querySelector(".page");
        let singlePageMarginTop = parseFloat(
          window.getComputedStyle(singlePage, null).marginTop
        );
        let singlePageMarginBottom = parseFloat(
          window.getComputedStyle(singlePage, null).marginBottom
        );
        // ivu-card-body的上下padding + 分页条的margin-top + .single-page的上下margin
        let otherHeight =
          ivuCardBodyPaddingTop +
          ivuCardBodyPaddingBottom +
          paginationMarginTop +
          singlePageMarginTop +
          singlePageMarginBottom;
        let tableHeight =
          singlePageHeight - searchHeight - paginationHeight - otherHeight;
        self.maxHeight = tableHeight - 2 - this.offsetHeight - pageHeaderHeight - pageHeaderMarBottom - searchHeightPaddTop;
        console.log(self.maxHeight)
      } catch (e) {
        self.maxHeight = 529 + "";
      }
    },
    // 页码改变的回调，返回改变后的页码
    pageNumberChange(pageNumber) {
      this.$emit("page-number-change", pageNumber);
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    pageSizeChange(pageSize) {
      this.$emit("page-size-change", pageSize);
    },
    // 单击某一行时触发，返回当前行的数据与索引值
    onRowClick(rowData, index) {
      //  this.$refs.table.toggleExpand(index);
      this.$emit("on-row-click", rowData, index);
    },
    // 双击某一行时触发，返回当前行的数据与索引值
    onRowDblclick(rowData, index) {
      this.$emit("on-row-dblclick", rowData, index);
    },
    // showLoading () {
    //   this.tableLoading = true
    // },
    // closeLoading () {
    //   this.tableLoading = false
    // },
    showLoading1() {
      this.tableLoading1 = true;
    },
    closeLoading1() {
      this.tableLoading1 = false;
    },
    handleCancel(selection, row) {
      this.$emit("on-select-cancel", selection, row);
    },
    handleSelect(selection, row) {
      this.$emit("on-select", selection, row);
    },
    handleSelectAll(selection) {
      this.$emit("on-select-all", selection, row);
    },
    handleCancelSelectAll(selection) {
      this.$emit("on-select-all-cancel", selection, row);
    },
    getHeight() {
      return this.height;
    }
  }
};
</script>

<style lang="less" scope="true">
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 48px 16px 24px;
}
.ivu-card-head {
    border-bottom: 0 solid #e8eaec;
    padding: 0 16px;
    line-height: 1;
}
.table-card{
  padding-top: 24px;
}
</style>
